<template>
	<!-- 待办事项 -->
	<view class="backlog-declare">
		<view class="bg-wrap">
			<u-image width="100%" height="283rpx" src="@/static/image/home/home_bg.png"></u-image>
		</view>
		<!-- 接收时间按钮 -->
		<view class="time-select" @click="showSelect">
			<!-- <text>接收时间</text>
			<u-image width="22rpx" height="22rpx" src="@/static/image/home/backlog_declare/select.png"></u-image> -->
		</view>
		<view class="policy-list">
			<mescroll-uni :fixed="false" ref="mescrollRef" @init="mescrollInit" @down="downCallback"
				@up="upCallback">
				<!-- <policy-list v-if="Object.keys(data).length > 0" :list="data" :showName="true" @click="handleClick">
				</policy-list> -->
				<ssp-item v-if="Object.keys(data).length > 0" :list="data" @click="handleClick" :level='level' @yuying='handelYuyin' @yuyingtime='handleYuyinTim'>
				</ssp-item>
			</mescroll-uni>
		</view>
		<!-- 待办事项列表 -->
		<!-- 接收时间下拉框 -->
		<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	import PolicyList from '@/components/pilicy-list/PilicyList.vue'
	import SspItem from '@/components/pilicy-list/sspitem.vue'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		apiUserAppeal
	} from '@/api/backlog/backlog.js'
	import { apiUserAppealBh } from '@/api/audit/audit.js'
	import { dateFormats } from '@/utils/utils.js'
	import CONFIG from '@/config/config.js'
	export default {
		name: 'BacklogDeclare',
		mixins: [MescrollMixin], // 使用mixin
		components: {
			PolicyList,
			SspItem
		},
		data() {
			return {
				//显示时间接收选择下拉框
				show: false,
				//接收时间列表
				list: [],
        otime: 0,
				data: [],
				isInit: true,
				level: getApp().globalData.level,
				type: '',
				
			}
		},

		onLoad(options)
    {
      if (options.otime) {
        this.otime = 1
      }
      console.log(options)
    },
		onShow() {
			console.log(SspItem)
			console.log(PolicyList)
			if (!this.isInit) {
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			}
			this.isInit = false;
			this.type = this.$Route.query.type;
			//部门干事页面标题为驳回事项
			if (this.level == 2 && this.type == 3) {
				uni.setNavigationBarTitle({
				　　title: '驳回事项'
				})
			}
		},
		methods: {
			handleYuyinTim(e){
				console.log('倒计时触发:',e.index)
				if(this.level == 1){
					this.data[e.index].flag = false
				}else{
					this.data[e.index].appeal.flag = false
				}
				
			},
			handelYuyin(e){
				console.log(e)
				if(this.level == 1){
					this.data[e.index].flag = !e.flag
				}else{
					this.data[e.index].appeal.flag = !e.flag
				}
			},
			//显示接收时间下拉框
			showSelect() {
				this.show = true;
			},
			//下拉框选中确定时
			confirm(e) {
				console.log(e)
			},
			//列表项点击时触发
			handleClick(info) {
				console.log(info)
				let id = '';
				if (this.level == 1) {
					id = info.id;
				} else {
					id = info.appeal_id;
				}
				this.$Router.push({
					name: 'backlog_declare_detail',
					params: {
						id
					}
				})
			},
			downCallback() {
				// 第2种: 下拉刷新和上拉加载调同样的接口, 则不用第1种, 直接mescroll.resetUpScroll()即可
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			async upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				try {
					let res = null;
					if (this.level == 2 && this.type == 3) {
						res = await apiUserAppealBh(pageNum, pageSize)
					} else {
						res = await apiUserAppeal(pageNum, pageSize, this.otime);
					}
					let _data = res.data.list
					let imageRegex = /\.(jpg|jpeg|png|gif)$/i;
					let videoRegex = /(mp4|avi|mov)/i;
					_data.map((v,i)=>{
						let arr = []
						let url = ''
						let type = ''
						if(this.level == 1){
							if(v.material_files.length != 0){
								let zongArr = v.material_files.split(',')
								zongArr.map((vv,ii)=>{
									url = CONFIG.baseUrl +  vv
									if(imageRegex.test(vv)){
										type = 'img'
									}
									if(videoRegex.test(vv)){
										type = 'video'
									}
									arr.push({url,type})
								})
							}
							if(v.voice_file != ''){
								v.voice_file = CONFIG.baseUrl +  v.voice_file
							}
							v.material_files = arr
							v.createtime = dateFormats(v.createtime * 1000,'Y-m-d H:i')
							v.flag = false
						}else{
							if(v.appeal.material_files.length != 0){
								let zongArr = v.appeal.material_files.split(',')
								zongArr.map((vv,ii)=>{
									url = CONFIG.baseUrl +  vv
									if(imageRegex.test(vv)){
										type = 'img'
									}
									if(videoRegex.test(vv)){
										type = 'video'
									}
									arr.push({url,type})
								})
							}
							if(v.appeal.voice_file != ''){
								v.appeal.voice_file = CONFIG.baseUrl +  v.appeal.voice_file
							}
							
							v.appeal.material_files = arr
							v.appeal.createtime = dateFormats(v.createtime * 1000,'Y-m-d H:i')
							v.appeal.flag = false
						}
						
						
					})
					// 接口返回的当前页数据列表 (数组)
					// let curPageData = res.data.list;
					let curPageData = _data;
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = res.data.totalPage;
					//设置列表数据
					if (page.num == 1) this.data = []; //如果是第一页需手动置空列表
					this.data = this.data.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
					this.mescroll.endByPage(curPageLen, totalPage);

					// 如果数据较复杂,可等到渲染完成之后再隐藏下拉加载状态: 如
					// 建议使用setTimeout,因为this.$nextTick某些情况某些机型不触发
					setTimeout(() => {
						this.mescroll.endSuccess(curPageLen)
					}, 20)
				} catch (e) {
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				}
			}


		}
	}
</script>

<style lang="scss" scoped>
	.backlog-declare {
		padding: 0 20rpx;
	}

	.bg-wrap {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
	}

	.time-select {
		display: flex;
		justify-content: flex-end;

		text {
			margin-right: 12rpx;
			font-size: 26rpx;
			color: #FFFFFF;
		}
	}

	.policy-list {
		margin-top: 22rpx;
		height: calc(100vh - 40rpx);
		// background: #FFFFFF;
		border-radius: 20rpx;
	}
</style>
